<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/themes/icon.css" rel="stylesheet">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
</head>
<script type="text/javascript">
    $(function(){
    	//配置修改个人信息表单请求
    	$('#personalUpForm').form({
    		url:'${pageContext.request.contextPath}/personalUp',
    		//提交之前需要验证（如果提示文字是非隐藏的则无法提交）
    		onSubmit: function () {
    			if(!$("#promptElName").is(":hidden")||!$("#promptElNameLen").is(":hidden")
    	    			||!$("#promptElAge").is(":hidden")||!$("#promptElAgeLen").is(":hidden")
    	    			  ||!$("#promptTellphone").is(":hidden")){
    		    	$.messager.alert('我的消息','修改失败,不能为空或者格式有误')
    		    	return false;
    		    }            
    		               },
    			success:function(data){
    				if(data=="1"){
    					$.messager.alert('我的消息','保存成功，下次登录自动更新页面个人信息！','info',function(){
    						
    					});
    				}else{
    					$.messager.alert('我的消息','修改失败,不能为空或者格式有误')
    				}
    			}
    	});
    	//设置性别单选框的初始值
    	if('${currentemployee.elSex }'=="男"){
    		$("input[name='elSex'][value=男]").attr("checked",true); 
    	}else{
    		$("input[name='elSex'][value=女]").attr("checked",true);
    	}
    	//默认修改密码表单是关闭的
		$('#uppswdiv').dialog('close');	
		//打开修改密码面板
		 $('#pswUp').bind('click', function(){    
			 $('#uppswdiv').dialog('open');	   
		    });    
		//配置修改密码修改表单请求
	    	$('#uppsw').form({
	    		url:'${pageContext.request.contextPath}/upswUp',
	    			success:function(data){
	    				if(data=="1"){
	    					$.messager.alert('我的消息','修改成功')
	    					$('#uppswdiv').dialog('close');	
	    					$("#uppsw").form('clear');
	    					
	    				}else{
	    					$.messager.alert('我的消息','旧密码错误')
	    				}
	    			}
	    	});
		//判断两次输入的新密码是否一致
	    	$.extend($.fn.validatebox.defaults.rules, {   

	    	    equals: {    
	    	        validator: function(value,param){    
	    	            return value == $(param[0]).val();    
	    	        },    
	    	        message: '两次输入的新密码不一致'   
	    	    }    
	    	}); 
	    	//验证员工姓名格式，只能输入汉字
	   	 $("#elName").textbox('textbox').bind('blur', function(e){
	   	        var elName=$("#elName").val();
	   	        if(elName!=""){
	   	        	var pattern1=/^[\u4e00-\u9fa5]+$/;
	   	        	var pattern2=/^[\u4e00-\u9fa5]{1,5}$/;
	   	 	        var r=elName.match(pattern1);
	   	 	        if(r==null){ 
	   	 	        	$("#promptElName").show();
	   	 	        }else{
	   	 	        	$("#promptElName").hide();
	   	 	        	var v=elName.match(pattern2);
	   	 	        	if(v==null){
	   	 	        		$("#promptElNameLen").show();
	   	 	        	}else{
	   	 	        		$("#promptElNameLen").hide();
	   	 	        	}
	   	 	        }
	   	        }
	   		});
	   //验证员工年龄格式，只能输入正整数
		 $("#elAge").textbox('textbox').bind('blur', function(e){
		        var elAge=$("#elAge").val();
		        if(elAge!=""){
		        	var pattern1=/^[0-9]*[1-9][0-9]*$/;
		        	var pattern2=/^\d{1,2}$/;
		  	        var r=elAge.match(pattern1);
		  	        if(r==null){ 
		  	        	 $("#promptElAge").show();
		  	        }else{
		  	        	$("#promptElAge").hide();
		  	        	var v=elAge.match(pattern2);
		 	        	if(v==null){
		 	        		$("#promptElAgeLen").show();
		 	        	}else{
		 	        		$("#promptElAgeLen").hide();
		 	        	}
		  	        }
		        }
	 		});
		//验证员工电话号码格式
		 $("#tellphone").textbox('textbox').bind('blur', function(e){
		        var tellphone=$("#tellphone").val();
		        if(tellphone!=""){
		        	var pattern=/^1[34578]\d{9}$/;
		 	        var r=tellphone.match(pattern);
		 	        if(r==null){ 
		 	        	 $("#promptTellphone").show();
		 	        }else{
		 	        	$("#promptTellphone").hide();
		 	        }
		        }
	 		});
    });
    
  //配置修改个人信息表单提交事件
    function personalUpBt() {
    	$('#personalUpForm').form('submit');
    }
  //配置修改密码表单提交事件
    function uppsw() {
    	$('#uppsw').form('submit');
    }
</script>
<body>
     设置个人资料
     <form id="personalUpForm"method="post">
      <div style="margin-top: 20px;display: none">
           <span>员工Id:</span>
           <input name="elId" class="easyui-textbox" data-options="" style="width:150px;height: 28px"value="${currentemployee.elId }">
        </div>
     <div style="margin-top: 20px">
           <span>姓名:</span>
           <input id="elName" name="elName" class="easyui-textbox" data-options="" style="width:150px;height: 28px"value="${currentemployee.elName }">
           <span id="promptElName" style="display: none;color: red">只能输入汉字</span> 
            <span id="promptElNameLen" style="display: none;color: red">长度超出限制</span> 
        </div>
        <div style="margin-top: 20px">
           <span>性别:</span>
	      <input type="radio" name="elSex" value="男"><span>男</span>
	      <input type="radio" name="elSex" value="女"><span>女</span>
        </div>
        <div style="margin-top: 20px">
           <span>年龄:</span>
           <input id="elAge" name="elAge" class="easyui-textbox" data-options="" style="width:150px;height: 28px"value="${currentemployee.elAge}">
           <span id="promptElAge" style="display: none;color: red">请输入正整数</span> 
            <span id="promptElAgeLen" style="display: none;color: red">长度超出限制</span>  
        </div>
         <div style="margin-top: 20px">
           <span>电话:</span>
           <input id="tellphone" name="tellphone" class="easyui-textbox" data-options="" style="width:150px;height: 28px"value="${currentemployee.tellphone}">
           <span id="promptTellphone" style="display: none;color: red">电话号码格式有误</span> 
        </div>
        </form>
       <!-- 修改密码按钮 --> 
        <div style="margin-top:10px;">
		<a id="pswUp"href="javascript:void(0)" class=""
			onclick="pswUp()" style="width: 80px">修改密码？</a> 
	</div> 
         <div style="margin-left:50px;margin-top:20px; padding: 5px 0">
		<a href="javascript:void(0)" class="easyui-linkbutton"
			onclick="personalUpBt()" style="width: 80px">保存</a> 
	</div> 
	<!-- 修改密码表单 -->
	    <div id="uppswdiv" class="easyui-dialog" title="修改密码" style="width:500px;height:480px;" >
      <form id="uppsw"method="post">
        <div style="margin-top: 20px">
           <span>旧密码:</span>
           <input name="oldpsw" class="easyui-textbox " data-options="required:true" type="password"style="width:150px;height: 28px">
        </div>
        <div style="margin-top: 20px">
           <span>新密码:</span>
           <input name="newpsw"id="newpsw" class="easyui-validatebox textbox" data-options="required:true" type="password"style="width:150px;height: 28px">
        </div>
        <div style="margin-top: 20px">
           <span>新密码:</span>
           <input name="renewpsw" class="easyui-validatebox textbox" data-options="required:true" type="password"style="width:150px;height: 28px" validType="equals['#newpsw']">
        </div>
      </form>
       <div style="margin-left:50px;margin-top:20px; padding: 5px 0">
		<a href="javascript:void(0)" class="easyui-linkbutton"
			onclick="uppsw()" style="width: 80px">提交</a> 
	</div> 
   </div>
</body>
</html>